<template>
  <div class="supplier-slide-from">
    <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
      <el-form-item label="字段名称" prop="title">
        <el-col :span="12">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="英文标识" prop="iden">
        <el-col :span="12">
          <el-input :disabled="row.id ? true : false" v-model="form.iden"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="表单类型" prop="types">
        <el-col :span="12">
          <el-select v-model="form.types" placeholder="请选择表单类型">
            <el-option label="文本框" value="1"></el-option>
            <el-option label="单选" value="2"></el-option>
            <el-option label="多选" value="3"></el-option>
            <el-option label="下拉" value="4"></el-option>
            <el-option label="时间" value="5"></el-option>
            <el-option label="图片" value="6"></el-option>
            <el-option label="文本域" value="7"></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="参数" prop="parameter" v-if="form.types == '2' || form.types == '3' || form.types == '4'">
        <el-col :span="12">
          <el-input v-model="form.parameter" type="textarea" rows="3"></el-input>
          <div class="tl">请使用@作为分隔符</div>
        </el-col>
      </el-form-item>

      <el-form-item label="是否开启" prop="is_open">
        <el-col :span="12" class="tl">
          <el-switch class="zdySwith" :width="82" v-model="form.is_open" active-color="#1aad19" inactive-color="#ffffff" active-text="开启"
              inactive-text="关闭" active-value="1" :disabled="clickType != 1" inactive-value="0"></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="是否必填" prop="is_verification">
        <el-col :span="12" class="tl">
          <el-switch class="zdySwith" :width="82" v-model="form.is_verification" active-color="#1aad19" inactive-color="#ffffff" active-text="是"
              inactive-text="不是" active-value="1" :disabled="clickType != 1" inactive-value="0"></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="备注">
        <el-col :span="12">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="默认文字">
        <el-col :span="12">
          <el-input type="textarea" v-model="form.default"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-if="clickType == 1" @click="submitForm('form')">提交</el-button>
        <el-button type="primary" v-else @click="$emit('closedia', true)">我已知晓</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import uploadpic from "@/components/page/pic/up_pic";
export default {
  name: "supplier-slide-from",
  props: ["row", "clickType"],
  // props: {
  //   row: {
  //     type: Object,
  //     default: () => {},
  //   },
  //   clickType: {
  //     type: Boolean,
  //   },
  // },
  components: {
    uploadpic
  },
  data () {
    return {
      form: {
        title: "",
        bid: "",
        remark: "",
        default: "",
        types: "",
        parameter: "",
        is_open: "",
        is_verification: "",
        is_check: true,
        parArr: []
      },
      rules: {
        title: [{ required: true, message: "请输入表名称", trigger: "blur" }],
        types: [
          { required: true, message: "请选择表单类型", trigger: "change" }
        ],
        iden: [{ required: true, message: "请输入英文标识", trigger: "blur" }]
      },
      formLabelWidth: "120px",
      bool: true,
      createTime: [],
      formInline: {
        created_time_begin: "",
        created_time_end: "",
        oid: "",
        is_check: ""
      },
      live_single: {
        avatar: ""
      }
    };
  },
  watch: {
    createTime (val) {
      if (val != null) {
        this.formInline.created_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.created_time_end = this.$fnc.phptime(val[1]);
        console.log(this.formInline.created_time_begin);
        console.log(this.formInline.created_time_end);
      } else {
        this.formInline.created_time_begin = "";
        this.formInline.created_time_end = "";
      }
    },
    clickType (to, from) {
      console.log(to);
      console.log(from);
    }
  },
  created () {
    if (JSON.stringify(this.row) != "{}") {
      this.form = JSON.parse(JSON.stringify(this.row));
    }
  },
  mounted () { },
  methods: {
    onSuccess (pic) {
      console.log(pic);
      this.live_single.avatar = pic;
      // this.$emit("hideDio",this.live_single.avatar)
    },
    addBd (params) {
      params.bid = this.$route.query.id;
      this.$api.getCharacter.characterFieldSaveadd(params).then(res => {
        if (res.data.code == 200) {
          console.log(res, "123456");
          this.$emit("hideDio", true, this.live_single.avatar);
          this.$fnc.alertSuccess({ text: "添加成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    editBd (params) {
      this.$api.getCharacter.characterFieldSaveEdit(params).then(res => {
        if (res.data.code == 200) {
          this.$emit("hideDio", true);
          this.$fnc.alertSuccess({ text: "修改成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },

    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.$emit('hideDio')
          this.$bus.$emit("hide-from");
          var params = {};
          params = this.form;
          if (params.id) {
            this.editBd(params);
          } else {
            this.addBd(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped></style>
